<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
const handleClick = () => {
  router.replace("/");
};
</script>

<template>
  <div class="nopage">
    <div class="nopage-body active">
      <div class="txt">404</div>
    </div>
    <div class="info">
      <div>页面找不到了</div>
      <el-button style="margin-top: 20px" @click="handleClick" type="primary"
        >返回首页</el-button
      >
    </div>
  </div>
</template>

<style lang="scss" scoped>
@keyframes animationName {
  to {
    filter: blur(0);
    letter-spacing: 0;
  }
}
@keyframes animationName1 {
  to {
    opacity: 1;
  }
}
.nopage {
  width: 100vw;
  height: 100vh;
  background-color: #c4c4c4;
  &-body {
    text-align: center;

    font-family: "Georgia";
    font-size: 240px;
    font-weight: 300;
    letter-spacing: 120px;
    //   filter: blur(20px);
    transform: all 0.5s;
    color: #e6e6e6;
    //
    .txt {
      animation: animationName 3s both 1;
      filter: blur(20px) contrast(100);
      font-weight: bold;
      text-shadow: 1px -1px #fff, -1px 1px #999, -10px 10px 5px #80808080;
    }
  }
  .info {
    text-align: center;
    margin-top: 30px;
    color: #666;
    font-size: 26px;
    font-weight: 300;
    opacity: 0;
    animation: animationName1 4s both 1;
  }
}
</style>
